<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<title>列车管理</title>
	<link rel="stylesheet" type="text/css" href="../../assets/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="../../assets/css/bootstrap-table.min.css">
	<link rel="stylesheet" type="text/css" href="../../assets/css/iconfont.css">
	<link rel="stylesheet" type="text/css" href="../../assets/libs/select2/select2.min.css">
	<link rel="stylesheet" type="text/css" href="../../assets/css/style.css">
</head>
<body>
<div class="skin-default" id="wrapper">
	<header class="navbar-header">
		<div class="brand">
			<a class="navbar-brand" href="../../index.html" title="AlphaAdmin">后台管理系统(v1.0)</a>
		</div>
		<div class="navbar">
			<i class="sidebar-toggle iconfont icon-menu" data-toggle="push-menu" role="button">
			</i>
			<div class="navbar-menu pull-right">
				<ul class="nav navbar-nav">
					<li class="dropdown user">
						<a class="dropdown-toggle" data-toggle="dropdown" href="#" title="用户">欢迎你，admin</a>
						<ul class="dropdown-menu">
							<li>
								<a data-toggle="modal" data-target=".menu-setpassword" href="#" title="个人信息">
									<i class="iconfont icon-menu-user"></i>
									修改密码
								</a>
							</li>
							<li>
								<a href="#" title="系统设置">
									<i class="iconfont icon-setting"></i>
									系统设置
								</a>
							</li>
							<li class="divider"></li>
							<li>
								<a data-toggle="modal" data-target=".menu-logout" href="#" title="登出">
									<i class="iconfont icon-power"></i>
									退出
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</header>
	<!-- 左侧导航 -->
	<aside class="main-sidebar">
		<div class="user-panel">
			<div class="image pull-left">
				<img src="../../assets/avatars/avatars.png" alt="">
			</div>
			<div class="info pull-right">
				<p class="title">admin</p>
				<strong>超级管理员</strong>
			</div>
		</div>
		<section class="sidebar">
			<ul class="sidebar-menu" data-widget="tree">
				<li>
					<a href="../../index.html" title="仪表盘">
						<i class="iconfont icon-dashborad"></i>
						<small>控制台</small>
					</a>
				</li>
				<li class="active">
					<a href="../../../index1/index.html" title="仪表盘">
						<i class="iconfont icon-dashborad"></i>
						<small>实时监控</small>
					</a>
				</li>
				<li class="treeview">
					<a href="#" title="图表">
						<i class="iconfont icon-chart"></i>
						<small>数据分析</small>
						<span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
					</a>
					<ul class="treeview-menu">
						<li class="active">
							<a href="../chart/chartjs.html">
								<i class="iconfont icon-circle-hollow"></i>
								<small>客流分析</small>
							</a>
						</li>
						<li>
							<a href="../chart/echartjs.html">
								<i class="iconfont icon-circle-hollow"></i>
								<small>站点分析</small>
							</a>
						</li>
						<li>
							<a href="../chart/chartjs.html">
								<i class="iconfont icon-circle-hollow"></i>
								<small>预测分析</small>
							</a>
						</li>
					</ul>
				</li>
				<li class="treeview">
					<a href="#" title="表单">
						<i class="iconfont icon-form"></i>
						<small>故障报警</small>
						<span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
					</a>
					<ul class="treeview-menu">
						<li>
							<a href="../forms/editor.html">
								<i class="iconfont icon-circle-hollow"></i>
								<small>故障报警</small>
							</a>
						</li>
					</ul>
				</li>
<!--				<li class="treeview">-->
<!--					<a href="#" title="UI元素">-->
<!--						<i class="iconfont icon-ui"></i>-->
<!--						<small>数据管理</small>-->
<!--						<span class=" pull-right">-->
<!--                                <i class="iconfont icon-menu-left-small"></i>-->
<!--                            </span>-->
<!--					</a>-->
<!--					<ul class="treeview-menu">-->
<!--						<li>-->
<!--							<a href="../ui/button.html">-->
<!--								<i class="iconfont icon-circle-hollow"></i>-->
<!--								<small>按钮</small>-->
<!--							</a>-->
<!--						</li>-->
<!--						<li>-->
<!--							<a href="../ui/icon.html">-->
<!--								<i class="iconfont icon-circle-hollow"></i>-->
<!--								<small>图标</small>-->
<!--							</a>-->
<!--						</li>-->
<!--						<li>-->
<!--							<a href="../ui/other.html">-->
<!--								<i class="iconfont icon-circle-hollow"></i>-->
<!--								<small>其他UI元素</small>-->
<!--							</a>-->
<!--						</li>-->
<!--					</ul>-->
<!--				</li>-->
				<li class="treeview">
					<a href="#">
						<i class="iconfont icon-table"></i>
						<small>用户管理</small>
						<span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
					</a>
					<ul class="treeview-menu">
						<li>
							<a href="../table/table.html">
								<i class="iconfont icon-circle-hollow"></i>
								<small>用户管理</small>
							</a>
						</li>
						<li>
							<a href="../table/data.html">
								<i class="iconfont icon-circle-hollow"></i>
								<small>职工管理</small>
							</a>
						</li>
					</ul>
				</li>
				<li class="treeview active">
					<a href="#">
						<i class="iconfont icon-folder"></i>
						<small>地铁管理</small>
						<span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
					</a>
					<ul class="treeview-menu">
						<li class="active">
							<a href="../page/login.html">
								<i class="iconfont icon-circle-hollow"></i>
								<small>列车管理</small>
							</a>
						</li>
						<li>
							<a href="../page/register.html">
								<i class="iconfont icon-circle-hollow"></i>
								<small>站点管理</small>
							</a>
						</li>
					</ul>
				</li>
				<li class="treeview">
					<a href="#">
						<i class="iconfont icon-category"></i>
						<small>后台监控</small>
						<span class=" pull-right">
                                <i class="iconfont icon-menu-left-small"></i>
                            </span>
					</a>
					<ul class="treeview-menu">
						<li>
							<a href="#">
								<i class="iconfont icon-circle-hollow"></i>
								<small>后台监控</small>
							</a>
						</li>
					</ul>
				</li>
			</ul>
		</section>
	</aside>
	<div class="page-wrapper">
		<div class="page-header">
			<h1 class="title">
				列车管理
				<small></small>
			</h1>
			<ol class="breadcrumb"  style="font-size: 18px">
				<li>
					<a class="active">
						<small><div class="header-left fl" id="time1"></div></small>
					</a>
				</li>
				<li>
					<small style="color: #0b6bbd">
						天气:晴
					</small>
				</li>
				<li class="active">
					<small style="color: #0b6bbd">温度:25℃</small>
				</li>
				<li class="active">
					<small style="color: #0b6bbd">湿度:74.9</small>
				</li>
				<li class="active">
					<small style="color: #0b6bbd">空气:54.9</small>
				</li>
			</ol>
		</div>
		<div id="app1">
			<!--中心布局-->
			<div class="container-fluid">
				<div class="container-fluid">
					<!--                    导航栏-->
					<div class="row">
						<div class="col-md-8 col-md-offset-1">
							<form class="navbar-form navbar-left" role="search">
								<div class="form-group">
									ID:<input type="text" class="form-control" placeholder="根据输入ID搜索"
											  v-model="searchid">
								</div>&nbsp;&nbsp;
								<div class="form-group">
									姓名:<input type="text" class="form-control" placeholder="根据输入姓名搜索"
											  v-model="searchname">
								</div>

								<button type="button" class="btn btn-info" @click="search">搜索</button>
							</form>
						</div>
					</div>
					<!--                    列车列表-->
					<div class="row" style="margin-top: 5px;">
						<div id="app">
							<table class="table table-striped table-bordered table-hover ">
								<tr>
									<th>列车编号</th>
									<th>列车类型</th>
									<th>列车状态</th>
									<th>运行线路</th>
									<th>主负责人</th>
									<th>操作</th>
								</tr>
								<tbody>
								<tr v-for="underground,index in undergrounds" :key="underground.underground_id">
									<td>{{underground.underground_id}}</td>
									<td>{{underground.underground_type}}</td>
									<td>{{underground.underground_status}}</td>
									<td>{{underground.underground_line}}</td>
									<td>{{underground.underground_connection}}</td>
									<td>
										<button class="btn btn-danger" @click="deleteuser(user.id)">删除</button>&nbsp;&nbsp;
										<button class="btn btn-primary" @click="xiugai(user.id)">编辑</button>
									</td>
								</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
						 aria-labelledby="myLargeModalLabel">
						<div class="modal-dialog modal-lg" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
											aria-hidden="true">&times;</span></button>
									<h4 class="modal-title" id="myModalLabel1">标题</h4>
								</div>
								<div class="modal-body">
									<p>大屏弹窗</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary">提交</button>
								</div>
							</div>
						</div>
					</div>
					<!-- Small modal -->
					<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"
						 aria-labelledby="mySmallModalLabel">
						<div class="modal-dialog modal-sm" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
											aria-hidden="true">&times;</span></button>
									<h4 class="modal-title" id="myModalLabel">标题</h4>
								</div>
								<div class="modal-body">
									<p>小屏弹窗</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary">提交</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 修改密码模态框 -->
					<div class="modal fade menu-setpassword" tabindex="-1" role="dialog">
						<div class="modal-dialog modal-sm" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4 class="modal-title">修改密码</h4>
								</div>
								<div class="modal-body">
									<table class="table">
										<tbody>
										<tr>
											<th>
												旧密码
											</th>
											<td>
												<input type="text" class="form-control" placeholder="请输入旧密码"
													   name="js-oldPassword">
											</td>
										</tr>
										<tr>
											<th>
												新密码
											</th>
											<td>
												<input type="text" class="form-control" placeholder="请输入新密码"
													   name="js-newPassword">
											</td>
										</tr>
										<tr>
											<th>
												确认密码
											</th>
											<td>
												<input type="text" class="form-control" placeholder="请再次输入新密码"
													   name="js-verifyPassword">
											</td>
										</tr>
										</tbody>
									</table>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
									<button type="button" class="btn btn-primary">保存</button>
								</div>
							</div>
						</div>
					</div>
					<!-- 退出提示模态框 -->
					<div class="modal fade menu-logout" tabindex="-1" role="dialog">
						<div class="modal-dialog modal-sm" role="document">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4 class="modal-title">提示</h4>
								</div>
								<div class="modal-body">
									<p>是否确定退出</p>
								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
									<button type="button" class="btn btn-primary">登出</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="../../assets/js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="../../assets/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../assets/js/alpha.js"></script>
<script type="text/javascript">
	$(function () {
	})
</script>
<!--                引入axios与vue-->
<script type="text/javascript" src="../../assets/js/vue.js"></script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			undergrounds: [],//数据赋值来源于后端服务接口，在页面加载完成之前完成赋值
		},
		methods: {},
		//生命周期相关函数
		created() {
			let _this = this;
			axios.get("http://localhost:8083/gdjt/underground/findAll").then(function (response) {
				console.log(response.data);
				_this.undergrounds = response.data;
			}).catch(function (err) {
				console.log(err);
			});
		}

	})
</script>
<script src="../page/js/jquery.min.js"></script>
<script src="../page/js/wodry.min.js"></script>
<script src="../page/js/fontscroll.js"></script>
<script>
	//顶部时间
	function getTime(){
		var myDate = new Date();
		var myYear = myDate.getFullYear(); //获取完整的年份(4位,1970-????)
		var myMonth = myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
		var myToday = myDate.getDate(); //获取当前日(1-31)
		var myDay = myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
		var myHour = myDate.getHours(); //获取当前小时数(0-23)
		var myMinute = myDate.getMinutes(); //获取当前分钟数(0-59)
		var mySecond = myDate.getSeconds(); //获取当前秒数(0-59)
		var week = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
		var nowTime;

		nowTime = myYear+'-'+fillZero(myMonth)+'-'+fillZero(myToday)+'&nbsp;&nbsp;'+fillZero(myHour)+':'+fillZero(myMinute)+':'+fillZero(mySecond)+'&nbsp;&nbsp;'+week[myDay]+'&nbsp;&nbsp;';
		//console.log(nowTime);
		$('#time1').html(nowTime);
	};
	function fillZero(str){
		var realNum;
		if(str<10){
			realNum	= '0'+str;
		}else{
			realNum	= str;
		}
		return realNum;
	}
	setInterval(getTime,1000);
</script>
</body>
</html>